<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-29 17:50:14
 * @LastEditTime: 2022-04-12 14:20:26
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="score">
    <div class="score_card_top">
      <div class="left">
        <span class="icon-box">
          <i class="iconfont icon-jurassic_company" style="font-size: 16px"></i>
        </span>
        <span class="companyName">{{ scoreData.enterpriseName || '--' }}</span>
      </div>
      <div class="right">
        <p>{{ scoreData.evaluateType | filterNature }}</p>
        <p style="margin-top: 10px">{{ scoreData.createTime || '--' }}</p>
      </div>
    </div>
    <div class="score_card_container">
      <el-form label-width="100px" style="" inline>
        <template>
          <el-form-item
            v-for="(item, index) in scoreData.scoreList"
            :key="index"
            :label="item.label"
            :style="{ marginBottom: '8px !important', marginRight: index + 1 == 2 ? '450px' : '20px' }"
          >
            <el-rate
              v-model="item.value"
              :max="5"
              disabled
              disabled-void-color="#dbdbdb"
              :colors="['#FD8628', '#FD8628', '#FD8628']"
            >
            </el-rate>
          </el-form-item>
          <div style="margin-top: 8px">
            <div class="tag_box">
              <div class="label" :style="{ paddingTop: scoreData.labelVos && scoreData.labelVos.length ? '5px' : '0' }">
                供应商标签:
              </div>
              <div class="tag_item">
                <template v-if="scoreData.labelVos && scoreData.labelVos.length">
                  <span class="tag_value" v-for="(item, index) in scoreData.labelVos" :key="index">
                    {{ item.labelName }}
                  </span>
                </template>
                <span v-else class="label_value">暂无标签</span>
              </div>
            </div>
            <!-- <el-form-item label="供应商标签:" style="margin-bottom: 0 !important">
              <template v-if="scoreData.labelVos && scoreData.labelVos.length">
                <span class="tag_value" v-for="(item, index) in scoreData.labelVos" :key="index">
                  {{ item.labelName }}
                </span>
              </template>
              <span v-else>暂无标签</span>
            </el-form-item> -->
          </div>
        </template>
      </el-form>
      <div class="score_con">
        <div class="con_label">评价内容:</div>
        <div class="con_container">
          <div v-if="scoreData.enterpriseContent">
            <tool-tip-node
              :oneLine="true"
              :value="scoreData.enterpriseContent"
              :isSetWidth="true"
              :nodes="nodes"
            ></tool-tip-node>
          </div>
          <div v-else>暂无评价内容</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ToolTipNode from '../../../components/ToolTipNode.vue'
export default {
  props: {
    scoreData: {
      type: Object,
      required: true
    },
    nodes: {
      type: String
    }
  },
  data() {
    return {}
  },
  filters: {
    filterNature(val) {
      const obj = {
        1: '招标阶段',
        2: '合同阶段',
        3: '验收阶段'
      }
      return obj[val] || '--'
    }
  },
  mounted() {},
  methods: {},
  components: { ToolTipNode }
}
</script>
<style lang="less" scoped>
#score {
  /deep/.el-form--inline .el-form-item__content {
    display: inline-flex;
    vertical-align: middle;
  }
  .el-rate {
    height: 28px;
  }
  /deep/ .el-rate__icon {
    font-size: 28px;
  }
  .tag_box {
    display: flex;
    .label {
      display: inline-block;
      width: 88px;
      font-size: 14px;
      text-align: right;
      margin-right: 12px;
      color: #333333;
    }
    .label_value {
      font-size: 14px;
      color: #333333;
      margin-bottom: 20px;
    }
    .tag_item {
      display: flex;
      width: calc(100% - 100px);
      flex-wrap: wrap;
    }
  }
}
.score_card_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  .left {
    .companyName {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
    .icon-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #999999;
      margin-right: 10px;
    }
  }
  .right {
    font-size: 14px;
    color: #666;
    text-align: right;
  }
}
.tag_value {
  display: inline-block;
  background: #fff4f2;
  // width: 110px;
  border: 1px solid #fa7355;
  padding: 0 15px;
  margin-right: 20px;
  margin-bottom: 20px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  color: #fa7355;
}
.score_con {
  display: flex;
  font-size: 14px;
  color: #333333;
  .con_label {
    display: inline-block;
    font-size: 14px;
    color: #333333;
    width: 88px;
    margin-right: 12px;
    text-align: right;
  }
  .con_container {
    width: calc(100% - 100px);
    // display: flex;
    // align-items: center;
  }
}
</style>
